<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { flotDetail } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      tableData: [],
      formData: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    getData() {
      flotDetail({ fleet_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>船队详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepCont">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">船队编号</div>
                  <div class="desText">{{ formData.fleet_number }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船队名称</div>
                  <div class="desText">{{ formData.fleet_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">调配员</div>
                  <div class="desText">{{ formData.fleet_tpy_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.fleet_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建员工</div>
                  <div class="desText">{{ formData.staff_name }}</div>
                </div>
              </div>
            </div>
            <div class="formDes stepCont">
              <div class="desTitle">关联船舶</div>
              <el-table
                class="tableMain"
                :data="formData.fleet_watercraft"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="watercraft_name"
                  show-overflow-tooltip
                  label="船名"
                />
                <el-table-column
                  prop="watercraft_colors"
                  show-overflow-tooltip
                  label="旗号"
                />
                <el-table-column
                  prop="watercraft_hh"
                  show-overflow-tooltip
                  label="呼号"
                />
                <el-table-column
                  prop="watercraft_imo"
                  show-overflow-tooltip
                  label="imo"
                />
                <el-table-column
                  prop="watercraft_type"
                  show-overflow-tooltip
                  label="船舶类型"
                />
                <el-table-column
                  prop="watercraft_area"
                  show-overflow-tooltip
                  label="船舶航区"
                />
                <el-table-column
                  prop="watercraft_area"
                  show-overflow-tooltip
                  label="载货量"
                >
                  <template #default="{ row }">
                    {{ row.watercraft_num }}{{ row.watercraft_dw }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="watercraft_zcsj"
                  show-overflow-tooltip
                  label="造船时间"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
